@import url(./base.less);

@rootSize:37.5rem;
@wp:0 (15 / @rootSize);

body {
    background-color: #fff;
    width: (375 / @rootSize);

    // 头部区域
    .top {
        width: (375 / @rootSize);
        height: (46 / @rootSize);
        background-color: #fff;
        padding: @wp;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
            font-size: (16 / @rootSize);
            color: #000;
            width: (60 / @rootSize);
        }
        .search {
            width: (200 / @rootSize);
            height: (32 / @rootSize);
            display: flex;
            align-items: center;
            background-color: #f7f7f7;
            border: solid (1 / @rootSize) beige;
            border-radius: (14 / @rootSize);
            img {
                width: (16 / @rootSize);
                height: (16 / @rootSize);
                background-size: cover;
                margin: 0 (16 / @rootSize);
            }
            input {
                width: (200 / @rootSize);
                height: (16 / @rootSize);
                font-size: (12 / @rootSize);
                border: none;
                color: azure;
                background-color: #f7f7f7;
            }
           
        }
        img {
            width: (22 / @rootSize);
            height: (26 / @rootSize);
            background-size: cover;
        }

    }

    // 广告区域
    .banner {
        width: (345 / @rootSize);
        height: (142 / @rootSize);
        margin: (10 / @rootSize) (15 / @rootSize);
        background-color: #e7e7e7;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        img {
            width: (345 / @rootSize);
            height: (130 / @rootSize);
            background-size: cover;
        }
        ul {
            width: (50 / @rootSize);
            height: (10 / @rootSize);
            display: flex;
            justify-content: space-between;
            align-items: center; 
            li {
                width: (10 / @rootSize);
                height: (3 / @rootSize);
                background-color: #000;
                border-radius: (1.5 / @rootSize);
            }
        }
    }

    // 租房方式
    .nav {
        width: (375 / @rootSize);
        height: (120 / @rootSize);
        padding: (20 / @rootSize) (15 / @rootSize) (30 / @rootSize);
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fbfbfb;
        img {
            width: (168 / @rootSize);
            height: (70 / @rootSize);
            background-size: cover;
        }
    }

    // 优惠
    .hom {
        width: (346 / @rootSize);
        height: (220 / @rootSize);
        margin: @wp;
        background-color: #fff;
        .preferential {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: (346 / @rootSize);
            height: (20 / @rootSize);
            h4 {
                font-size: (18 / @rootSize);
                color: #101010;
            }
            a {
                display: block;
                width: (10/ @rootSize);
                height: (16 / @rootSize);
                background-size: cover;
            }
        }
        .house {
            width: (346 / @rootSize);
            height: (200 / @rootSize);
            display: flex;
            justify-content: space-between;
            margin-top: (18 / @rootSize);
            .picture {
                display: flex;
                flex-direction: column;
                img {
                    width: (168 / @rootSize);
                    height: (116 / @rootSize);
                    background-size: cover;
                }
                h6 {
                    height: (15 / @rootSize);
                    line-height: (15 / @rootSize);
                    margin-top: (10 / @rootSize);
                    font-size: (14 / @rootSize);
                    color: #101010;
                }
                p {
                    height: (13 / @rootSize);
                    line-height: (13 / @rootSize);
                    margin-top: (10 / @rootSize);
                    font-size: (12 / @rootSize);
                    color: #aeaeae;
                }
                span {
                    height: (13 / @rootSize);
                    line-height: (13 / @rootSize);
                    margin-top: (10 / @rootSize);
                    font-size: (12 / @rootSize);
                    color: #f39800;
                }
            }
        }
    }

    // 广告位
     .space {
        width: (345 / @rootSize);
        height: (58 / @rootSize);
        margin: (30 / @rootSize) (15 / @rootSize);
        img {
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }

    // 推荐
    .recommend {
        width: (346 / @rootSize);
        min-height: (680 / @rootSize);
        margin: @wp;
        background-color: #fff;
      
        .preferential {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: (346 / @rootSize);
            height: (24 / @rootSize);
            h4 {
                font-size: (18 / @rootSize);
                color: #101010;
            }
            .way {
                width: (76 / @rootSize);
                height: (24 / @rootSize);
                margin-right: (16 / @rootSize);
                ul {
                    display: flex;
                    justify-content: space-between;
                    a {
                        display: block;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        font-size: (14 / @rootSize);
                        color: #101010;
                        font-weight: 600;
                        span {
                            width: (10 / @rootSize);
                            height: (3 / @rootSize);
                            background-color: #14a2ee;
                            border-radius: (1.5 / @rootSize)
                        }
                    }
                }
            }
        }

        .house {
            width: (346 / @rootSize);
            ul {
                display: flex;
                flex-direction: column;
                width: (346 / @rootSize);
                li {
                    width: (346 / @rootSize);
                    height: (95 / @rootSize);
                    margin-top: (20 / @rootSize);
                    display: flex;
                    img {
                        width: (110 / @rootSize);
                        height: (80 / @rootSize);
                        background-size: cover;
                        margin-right: (16 / @rootSize);
                    }
                    .txt {
                        flex-direction: column;
                        flex: 1;
                        h5 {
                            font-size: (14 / @rootSize);
                            color: #101010;
                            margin-bottom: (8 / @rootSize);
                        }
                        p {
                            width: (200/ @rootSize);
                            height: (13 / @rootSize);
                            line-height: (13 / @rootSize);
                            font-size: (12 / @rootSize);
                            color: #999999;
                            margin-bottom: (8 / @rootSize);
                           
                            &:nth-child(3) {
                                width: (200/ @rootSize);
                                height: (13 / @rootSize);
                                line-height: (13 / @rootSize);
                                // 第一步：让文字强制一行显示 
                                white-space: nowrap;
                                // 第二步：溢出隐藏 
                                overflow: hidden;
                                // 第三步：溢出的内容省略号显示
                                text-overflow: ellipsis;
                            }
                        }
                        .wsj {
                            display: flex;
                            
                            margin-bottom: (8 / @rootSize);
                            span {
                                width: (45 / @rootSize);
                                height: (16 / @rootSize);
                                font-size: (12 / @rootSize);
                                color: #999999;
                                line-height: (16 / @rootSize);
                                text-align: center;
                                border: solid (0.5 / @rootSize) #999999;
                                border-radius: (3 / @rootSize);
                            }

                        }
                        .price {
                            height: (13 / @rootSize);
                            font-size: (10 / @rootSize);
                            color: #f39800;
                            span {
                                font-size: (12 / @rootSize);
                            }
                        }
                    }

                }
            }
        }

        .resources {
            margin: (24 / @rootSize) (42 / @rootSize);
            width: (260 / @rootSize);
            height: (38 / @rootSize);
            line-height: (38 / @rootSize);
            text-align: center;
            background-color: #f2f2f3;
            border-radius: (19 / @rootSize);
            a {
                color: #999999;
                font-size: (12 / @rootSize);
            }
        }
        
    }
    .space-2 {
        width: (346 / @rootSize);
        height: (85 / @rootSize);
        margin: 0 (15 / @rootSize) (80/ @rootSize);
        img {
            width: 100%;
            background-size: cover;
        }
    }


    // 底部固定
    .bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: (375 / @rootSize);
        background-color: #ffffff;
        ul {
            height: (50 / @rootSize);
            display: flex;
            justify-content: space-around;
            align-items: center;
            li {
                width: (48/ @rootSize);
                height: (40 / @rootSize);
                a {
                    display: block;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: (20 / @rootSize);
                        height: (20 / @rootSize);
                        background-size: cover;
                    }
                    span {
                        font-size: (12 / @rootSize);
                        color: #cdcdcd;
                        margin-top: (5 / @rootSize);
                        &:nth-child(1) {
                            color: #333;
                        }
                    }
                }
            }
        }
    }
}




